<div class="well">

    <!-- ** widget header ** -->
    <div class="navbar navbar-heading">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" href="#">Friends Online</a>
            </div>
        </div>
    </div>
    <!-- ** ./ widget header ** -->

    <div id="online_users">
        {% if friends %}
            {% for friend in friends %}
                <div class="row-fluid user-list">
                    <div class="span4">
                        <img class="avatar" src="./images/profile/{{ friend.name }}.png">
                    </div>
                    <div class="span8">
                        <a class="uname" href="#">{{ friend.name }}</a>
                        <div class="btn-group">
                            <a class="btn btn-small bottom_tooltip" data-original-title="view profile"><i class="icon-user"></i></a>
                            <a class="btn btn-small bottom_tooltip" data-original-title="subscribe"><i class="icon-plus"></i></a>
                            <a class="btn btn-small bottom_tooltip" data-original-title="send message"><i class="icon-envelope"></i></a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>
</div>

